<template>
  <!-- 包含三个排行榜 -->
  <!-- 第一行，包含两个 -->
  <el-container width="100%">
    <el-aside width="50%">
      <ranking-list
        title="男生热搜榜"
        :bookInfos= "maleBookInfos"
      >
      </ranking-list>
    </el-aside>
    <el-aside width="50%">
      <ranking-list
        title="女生热搜榜"
        :bookInfos= "femaleBookInfos"
      >
      </ranking-list>
    </el-aside>
  </el-container>
  <!-- 第二行，包含一个 -->
  <el-container width="100%">
    <el-aside width="50%">
      <ranking-list
      title="出版热搜榜"
      :bookInfos= "pressBookInfos"
      >
      </ranking-list>
    </el-aside>
  </el-container>
</template>

<script>
import { ref, defineComponent } from 'vue'
import RankingList from "./RankingList.vue"
import { getBookInfos } from "@/api/axios/getBookInfos"
import { BOOK_INFOS_KEY } from "@/api/params"

export default defineComponent({
  components: {
    RankingList
  },
  async setup () {
    
    // 获取 三个 的链接 、、 不爬了，写前端
    // const rankings = await getRankingsUrl()
    const rankingUrls = [
      // 男生热搜榜链接
      '/ranking/6fda0ecb16f54c188bc320ec085e1184?type=male',
      // 女生热搜榜链接
      '/ranking/560b927118494ab1ac4c463b608add21?type=female',
      // 出版热搜榜链接
      '/ranking/06aa21ebe73a48799dbd59bf05dd6859?type=press'
    ]
    const maleBookInfosResponse = await getBookInfos(rankingUrls[0])
    const feMaleBookInfosResponse = await getBookInfos(rankingUrls[1])
    const pressBookInfosResponse = await getBookInfos(rankingUrls[2])
    
    const getBookInfosByRes = (res) => {
      return res.data[BOOK_INFOS_KEY]
    }
    
    return {
      maleBookInfos: getBookInfosByRes(maleBookInfosResponse),
      femaleBookInfos: getBookInfosByRes(feMaleBookInfosResponse),
      pressBookInfos: getBookInfosByRes(pressBookInfosResponse)
    }
  }
})
</script>

<style scoped>
  .el-container {
    /* background-color: #1f2022; */
  }
</style>
